<template>
  <div class="danren">
    <div class="main">
      <div class="btns">
        <el-button @click="level('chuji')">初级</el-button>
        <el-button @click="level('zhongji')">中级</el-button>
        <el-button @click="level('gaoji')">高级</el-button>
        <!-- <el-button @click="reset">重置</el-button> -->
      </div>
      <div class="space">
        <div v-for="(item, index) in block" :key="index" class="box-column">
          <div v-for="(i, idx) in item" :key="idx" class="box">
            <div
              class="bg"
              v-if="!i.show"
              :class="i.bg == 1 ? 'bg-lei' : i.bg == 2 ? 'bg-wenhao' : ''"
              @click="leftClick(index, idx)"
              @contextmenu.prevent="rightClick(index, idx)"
            ></div>
            <div
              class="content"
              v-if="i.show"
              :class="i.num == 'lei' ? 'bg-lei' : ''"
            >{{ i.num == 'lei' || i.num == 0 ? '' : i.num}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "game",
  data() {
    return {
      space: {
        row: 9,
        column: 9,
        lei: 10
      },
      block: []
    };
  },
  created() {
    this.initBlock();
    this.initBlockLeisAndNums();
    //重新赋值，否则block数据绑定失败，原因不明
    this.block = [...this.block];
  },
  methods: {
    initBlock() {
      for (var i = 0; i < this.space.column; i++) {
        this.block[i] = [];
        for (var j = 0; j < this.space.row; j++) {
          this.block[i].push({
            bg: 0,
            show: false,
            num: 0
          });
        }
      }
    },
    initBlockLeisAndNums() {
      let max = this.space.column * this.space.row - 1;
      let leis = [];
      while (leis.length < this.space.lei) {
        let randNum = parseInt(Math.random() * (max + 1), 10);
        let flag = false;
        leis.forEach(item => {
          if (item == randNum) {
            flag = true;
            return false;
          }
        });
        if (!flag) leis.push(randNum);
      }
      //把雷加上
      leis.forEach((item, index, arr) => {
        let c = parseInt(item / this.space.row);
        let r = item % this.space.row;
        this.block[c][r].num = "lei";
      });
      //把num加上
      leis.forEach((item, index, arr) => {
        let c = parseInt(item / this.space.row);
        let r = item % this.space.row;
        if (this.block[c - 1]) {
          if (this.block[c - 1][r].num != "lei") this.block[c - 1][r].num += 1;
          if (this.block[c - 1][r - 1]) {
            if (this.block[c - 1][r - 1].num != "lei")
              this.block[c - 1][r - 1].num += 1;
          }
          if (this.block[c - 1][r + 1]) {
            if (this.block[c - 1][r + 1].num != "lei")
              this.block[c - 1][r + 1].num += 1;
          }
        }

        if (this.block[c + 1]) {
          if (this.block[c + 1][r].num != "lei") this.block[c + 1][r].num += 1;
          if (this.block[c + 1][r - 1]) {
            if (this.block[c + 1][r - 1].num != "lei")
              this.block[c + 1][r - 1].num += 1;
          }
          if (this.block[c + 1][r + 1]) {
            if (this.block[c + 1][r + 1].num != "lei")
              this.block[c + 1][r + 1].num += 1;
          }
        }

        if (this.block[c][r - 1]) {
          if (this.block[c][r - 1].num != "lei") this.block[c][r - 1].num += 1;
        }

        if (this.block[c][r + 1]) {
          if (this.block[c][r + 1].num != "lei") this.block[c][r + 1].num += 1;
        }
      });
    },
    level(str) {
      if (str == "chuji") {
        this.space = {
          row: 9,
          column: 9,
          lei: 10
        };
      } else if (str == "zhongji") {
        this.space = {
          row: 16,
          column: 16,
          lei: 40
        };
      } else if (str == "gaoji") {
        this.space = {
          row: 30,
          column: 16,
          lei: 99
        };
      }
      this.block = [];
      this.initBlock();
      this.initBlockLeisAndNums();
      //重新赋值，否则block数据绑定失败，原因不明
      
      this.block = [...this.block];
    },
    reset() {},
    leftClick(c, r) {
      // console.log(this.block)
      if (this.block[c][r].num != "lei") {
        this.block[c][r].show = true;
        if (this.block[c][r].num === 0) {
          //展开0
          this.openZero(c, r);
        }
      } else {
        //点到雷
        this.block.forEach((item, index, arr) => {
          item.forEach((i, idx) => {
            this.block[index][idx].show = true;
          });
        });
        return;
      }
    },
    rightClick(c, r) {
      if (!this.block[c][r].show) {
        this.block[c][r].bg = (this.block[c][r].bg + 1) % 3;
      }
    },
    openZero(c, r) {
      for (let i = 0; i < 3; i++) {
        let newC = c + i - 1;
        if (newC >= 0 && newC <= this.space.column - 1) {
          for (let j = 0; j < 3; j++) {
            let newR = r + j - 1;
            //不判断!this.block[newC][newR].show会出现死循环
            if (
              newR >= 0 &&
              newR <= this.space.row - 1 &&
              !this.block[newC][newR].show
            ) {
              this.block[newC][newR].show = true;
              if (this.block[newC][newR].num === 0) {
                this.openZero(newC, newR);
              }
            }
          }
        }
      }
      // console.log(this.openZero)
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.btns{
  margin: 20px;
}
.box-column {
  display: flex;
  justify-content: center;
  .box {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    // background-color: #ccc;
    border: 1px solid #666;
    .bg {
      background-color: #ccc;
      width: 100%;
      height: 100%;
    }
    .content {
      width: 100%;
      height: 100%;
    }
    .bg-lei {
      background-image: url("../assets/炸弹.png");
      background-repeat: no-repeat;
      background-position: center center;
    }
    .bg-wenhao {
      background-image: url("../assets/问号.png");
      background-repeat: no-repeat;
      background-position: center center;
    }
  }
}
</style>
